import Home from '@/views/Home.vue'

export default [
  {
    path: '/',
    name: 'home',
    alias: '/index',
    component: Home,
    // 2. 函数模式
    props: route => ({ // 当前的路由对象 route
      food: route.query.food // 当前路径的一个参数作为参数传入
    }),
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
      //
      // if (from.name === 'login') alert('从登录页')
      // else alert('不是从登录页')
      // 最后一定要调用next()否则不会成功跳转
      next()
    }

  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 懒加载配置
    component: () => import(/* webpackChunkName: 'about' */ '@/views/About.vue'),
    // props: {
    //   food: '青椒炒肉片'
    // }
    props: route => ({
      food: '青椒炒肉片',
      teken: route.query.teken
    }),
    meta: {
      // 路由元信息
      // 1. 是否需要权限认证什么的.
      title: '关于'
    }
  },
  {
    // 动态路由匹配 貌似可以用在用户中心页面  不同用户只要传给对应的值就好了
    path: '/u/:uid',
    name: 'user',
    component: () => import('@/views/users.vue'),
    // 传参
    // 0. 从$.route.params.uid 中获取参数 高度耦合 不推荐
    // 1.对象模式
    props: true // 会将 '/u/:uid'中的uid 传入组件
    // 2. 函数模式
    // props: route => ({ // 当前的路由对象 route
    //   uid: route.query.uid

    // })
  },
  {
    // 嵌套路由
    path: '/js',
    name: 'js',
    component: () => import('@/views/js.vue'),
    children: [
      // 包含在js.vue中的子页面
      // 多个子页面怎么办 todo
      {
        path: 'child001',
        name: 'child001',
        component: () => import('@/views/child001.vue')
      }
      // {
      //   path: 'child002',
      //   name: 'child002',
      //   component: () => import('@/views/child002.vue')
      // }
    ],
    meta: {
      // 路由元信息
      // 1. 是否需要权限认证什么的.
      title: 'js'
    }
  },
  // 命名路由
  {
    path: '/java',
    name: 'java',
    component: () => import('@/views/java.vue')
  },
  // 命名视图 貌似就是解决嵌套多个路由吧???
  {
    path: '/rmb',
    name: 'rmb',
    components: {
      // 默认 <router-view></router-view> 没有命名则加载 default
      default: () => import('@/views/default.vue'), // 默认加载001页面
      email: () => import('@/views/email.vue'),
      tel: () => import('@/views/tel.vue')
    }
  },
  // 重定向
  {
    path: '/main', // 访问main重定向到/页面
    // 1.
    // redirect: '/'
    // 2.
    redirect: {
      name: 'user',
      query: {
        uid: 1000
      },
      params: {
        uid: 'params参数值'
      }
    }
    // 3.
    // redirect: to => '/'
    // 3.
    // {
    //   // 内部必须返回一个路由对象
    //   console.log(to)
    //   // 1.
    //   // return {
    //   //   name: 'home'
    //   // }
    //   // 2.
    //   // return '/'

    // }

  },
  // 别名
  {
    path: '/vue',
    name: 'vue',
    alias: 'vue.js',
    component: () => import('@/views/vue.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login.vue'),
    props: route => ({ // 当前的路由对象 route
      teken: route.query.teken // 当前路径的一个参数作为参数传入

    })
  },
  {
    path: '/store',
    name: 'store',
    component: () => import('@/views/store.vue')
  },

  // html5  history模式的配置 默认哈希模式 页面无刷新.
  {
    path: '*',
    name: '404',
    component: () => import('@/views/404.vue')
  }
]

